<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('角色管理')" />
</head>
<body>
    <div style="width: 70%;float: left">
        <table id="table" lay-filter="table"></table>
    </div>

    <div id="btns" style="width: 28%;min-height:450px;float:left;border: 1px solid #D0D0D0;margin: 10px">
         <a style="margin: 5px" href="#" class="layui-btn layui-btn-sm" data-type="grant">授权</a>
         <a style="margin: 5px" href="#" class="layui-btn layui-btn-sm layui-btn-primary" layui-event="allCheck">全选</a>
         <a style="margin: 5px" href="#" class="layui-btn layui-btn-sm layui-btn-danger"layui-event="notAllCheck">全不选</a>
         <hr/>
        &nbsp;<div style="margin-left: 10px" id="test12"></div>
    </div>
    <div>

    </div>
    <!-- 表格操作列 -->
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改数据</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除数据</a>
    </script>
    <script>
        var layer,tb,tree,mids=[];
        layui.use(['tree','table'],function () {
            tb = layui.table;
            tree = layui.tree;
            layer = layui.layer;
            getMenuTree();
            // 渲染表格
            tb.render({
                elem: '#table',
                url: '/roc/find',
                toolbar: 'default',
                height: 'full-20',

                defaultToolbar: ['filter', 'print', 'exports', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [
                        {type: 'numbers'},
                        {type: 'checkbox'},
                        {field: 'name', title: '角色名称', minWidth: 165},
                        {field: 'remark', title: '描述'},
                        {fixed: 'right', toolbar: '#tbBar', title: '操作', width: 200}
                    ]
                ]
            });
            tb.on('toolbar(table)',function (obj) {
                switch (obj.event) {
                    case 'add':
                        openDig('新增','');
                        break;
                }
            });
            //监听表格复选框被选中
            tb.on('checkbox(table)',function(obj){
                var rid = obj.data.id;
                tree.setChecked('demoId1',1);
            });

            $('#btns a').on('click',function(){
               var type = $(this).data('type');
               active[type]?active[type].call(this):'';
            });

            var active = {
                'grant':function () {
                    var rowData = tb.checkStatus('table').data;
                    if(rowData!=null&&rowData.length>0){
                        var rid = rowData[0].id;
                        var treeData = tree.getChecked('demoId1');
                        mids = [];
                        getMenuTreeIds(treeData);
                        grant(rid);
                    }else{
                        layer.msg('请选择角色!');
                    }
                }
            }

        });
        //获取选中菜单树的id
        function getMenuTreeIds(treeData){
            $.each(treeData,function (i,menu) {
                var mid = menu.id;
                mids.push(mid);
                var childData = menu.children;
                getMenuTreeIds(childData);
            })
        }

        //执行授权操作
        function grant(rid){
            $.ajax({
                url:'/roc/grant',
                type:'post',
                data:{
                    rid:rid,
                    mids:mids.join(",") //数组转为字符串，且是用,号进行隔开
                },
                dataType: 'json',
                success:function(data){
                    layer.msg(data.msg);
                }
            })
        }

        function getMenuTree(){
            $.get('/muc/getMenuJsonAll',function (data) {
                data = JSON.parse(data);
                //基本演示
                layui.tree.render({
                    elem: '#test12'
                    ,data: data
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'demoId1'
                    ,click: function(obj){
                        var data = obj.data;  //获取当前点击的节点数据
                        //layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                    },
                    showLine: true,
                    icon: { //三种图标样式，更改几个都可以，用的是layui的图标
                        open: "&#xe7a0;", //节点打开的图标
                        close: "&#xe622;", //节点关闭的图标
                        end: "&#xe621;" //末尾节点的图标
                    },
                    color: { //三种图标颜色，独立配色，更改几个都可以
                        open: "#EE9A00", //节点图标打开的颜色
                        close: "#EEC591", //节点图标关闭的颜色
                        end: "#828282" //末级节点图标的颜色
                    }
                });
            });
        }
        function openDig(title,id){
            var url = '/roc/add';
            if(id!=''){
                id = "?id="+id;
                url = '/roc/edit';
            }
            layer.open({
                title:title,
                type:2,//默认0-信息框，1-页面，2-iframe
                maxmin:true,//是否显示最大化最小按钮
                content:'/roc/addEdit'+id,
                area:['40%','60%'],
                anim:5,
                btn:['确定保存','取消关闭'],
                btnAlign:'c',
                yes:function(i,l){

                    //获取表单
                    var f = layer.getChildFrame('form',i);
                    var data = f.serialize();
                    $.ajax({
                        type:'post',
                        url:url,
                        data:data,
                        dataType:'json',
                        success:function (result) {
                            layer.alert(result.msg);
                            if(result.is){
                                //关闭窗口
                                layer.close(i);
                                //刷新表格
                                layui.table.reload('table');
                            }
                        }
                    });
                },
                btn2:function (index,l) {
                    layer.alert("点击取消");
                }
            });
        }
    </script>
</body>
</html>